<template>
  <div id="app" style="height: 100%;overflow: hidden">
    <loading :show="$store.state.loading" text="加载中"></loading>
    <view-box ref="viewBox">
      <!--header slot-->
      <div class="vux-demo-header-box" slot="header">
        <x-header :left-options="leftOptions" :title="$store.state.title"></x-header>
      </div>
      <div style="padding-top: 46px;padding-bottom: 55px;box-sizing: border-box;height: 100%">
      <router-view></router-view>
      </div>
      <tabbar
        v-show="$store.state.title === '主页' || $store.state.title ==='菜单'"
        v-model="index" slot="bottom">
        <tabbar-item :selected="0 === index" @on-item-click="handleItemClick(0,'主页')">
          <span class="iconfont icon-nav_home" slot="label">主页</span>
        </tabbar-item>
        <tabbar-item @on-item-click="handleItemClick(1, '菜单')">
          <span class="iconfont icon-nav_learn" slot="label">菜单</span>
        </tabbar-item>
      </tabbar>
    </view-box>
  </div>
</template>

<script>
  export default {
    name: 'app',
    computed: {
      leftOptions () {
        return {
          showBack: this.$route.path !== '/' && this.$route.path !== '/Menu'
        }
      },
    },
    data() {
      return {
        index: 0

      }
    },
    methods: {
      handleCloseLoading() {
        this.$store.commit('setLoading', false);

      },
      handleItemClick(item, title) {
        if (item === 1 && !this.$store.state.checkConn) {
          this.index = 0;
          this.$error("请通过连接测试!!")
        }
        this.$store.commit('setTitle', title);
        this.handleIndexChange();
      },
      handleIndexChange() {
        let selected = this.index;
        if (selected === 0) {
          if (this.$route.path === '/Menu') {
            return this.$router.go(-1);
          }
          return this.$router.push("/");
        }
        if (selected === 1) {
          return this.$router.push("/Menu");
        }
      }
    },
    created() {
      window.$route = this.$route
      this.$store.commit('setIpAndPort', window.localStorage.ipAndPort || '')
      this.$store.commit('setCarInfo', {jcxdh: window.localStorage.jcxdh || 1})
      const _this = this;
      this.$store.commit('setTitle', '主页');

      // 添加请求拦截器
      this.$http.interceptors.request.use(function (config) {
        if (config && config.data && config.data.api === 200) {
          return config;
        }
        _this.$store.commit('setLoading', true);
        // 在发送请求之前做些什么
        return config;
      }, function (error) {
        _this.$store.commit('setLoading', false);
        // 对请求错误做些什么
        return Promise.reject(error);
      });

// 添加响应拦截器
      this.$http.interceptors.response.use(function (response) {
        // 对响应数据做点什么
        _this.$store.commit('setLoading', false);
        return response;
      }, function (error) {
        _this.$store.commit('setLoading', false);
        // 对响应错误做点什么
        return Promise.reject(error);
      });
    }
  }
</script>

<style lang="less">
  @import '~vux/src/styles/reset.less';

  body {
    background-color: #fbf9fe;
  }

  html {
    font-size: 20px;
  }

  html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
  }

  .app {
    height: 100%;
    width: 100%;
  }
  .vux-demo-header-box {
    z-index: 100;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
  }
</style>
